<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS浮动</title>
    <style>
        /* 使用浮动可以使左右元素对其于父元素左右两端 */
        #float-demo-1 {
            width: 800px;
            background-color: aqua;
            overflow: auto;
        }
        #float-demo-1 .left {
            width: 105px;
            height: 105px;
            background-color: yellowgreen;
            float: left;
        }
        #float-demo-1 .right {
            width: 105px;
            height: 105px;
            background-color: yellow;
            float: right;
        }

        /* 浮动对于多余宽度的元素的处理 */
        #float-demo-2 {
            width: 800px;
            background-color: aqua;
            overflow: auto;
        }
        #float-demo-2 .left {
            width: 105px;
            height: 105px;
            background-color: yellowgreen;
            float: left;
        }
        #float-demo-2 .right {
            width: 105px;
            height: 105px;
            background-color: yellow;
            float: right;
        }

        /* 未设置 overflow 属性时会发生父元素坍塌和浮动溢出 */
        #float-demo-3 {
            width: 800px;
            background-color: aqua;
        }
        #float-demo-3 .left {
            width: 105px;
            height: 105px;
            background-color: yellowgreen;
            float: left;
        }
        #float-demo-3 .right {
            width: 105px;
            height: 105px;
            background-color: yellow;
            float: right;
        }
    </style>
</head>
<body>
    <p>在父元素中的子元素中设置 float 属性可以使子元素浮动在父元素之上，并对其父元素的两端：</p>
    <div id="float-demo-1">
        <p class="left">左元素</p>
        <p class="right">右元素</p>
    </div>
    <br>
    <p>对于多个子元素，在父元素的宽度内放不下时，子元素会在父元素内另起一行进行放置：</p>
    <div id="float-demo-2">
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="left">左元素</p>
        <p class="right">右元素</p>
        <p class="right">右元素</p>
        <p class="right">右元素</p>
        <p class="right">右元素</p>
        <p class="right">右元素</p>
        <p class="right">右元素</p>
        <p class="right">右元素</p>
    </div>
    <br>
    <p>如果在父元素中未设置 overflow 属性，则会发生父元素坍塌和浮动溢出，影响其他内容的显示：</p>
    <div id="float-demo-3">
        <p class="left">左元素</p>
        <p class="right">右元素</p>
    </div>
    <p>一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容一些内容</p>
</body>
</html>